<template>
    <div class="book-list">
      <h2>Book List</h2>
      <ul>
        <li v-for="book in books" :key="book.id">
          <router-link :to="{ name: 'book-detail', params: { id: book.id } }">
            {{ book.title }} by {{ book.author }}
          </router-link>
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    name: 'BookList',
    data() {
      return {
        books: [
          { id: 1, title: '1984', author: 'George Orwell' },
          { id: 2, title: 'To Kill a Mockingbird', author: 'Harper Lee' },
          { id: 3, title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .book-list {
    padding: 20px;
  }
  
  .book-list h2 {
    margin-bottom: 10px;
  }
  
  .book-list ul {
    list-style-type: none;
    padding: 0;
  }
  
  .book-list li {
    margin: 5px 0;
  }
  </style>